<template>
    <!-- 优惠劵 -->
    <div class="couponContainer">
        <div class="coupon" 
            :class="'style' + couponInfo.style"
            ref="coupon"
        >
            <v-touch @swipeleft="onSwipeLeft" @swiperight="onSwiperight">
                <ul class="warp" ref="warp">
                    <li 
                        v-for="item in couponInfo.list"
                        :key="item.Id"
                        :style="{background: couponInfo.color}"
                        :class="[couponInfo.list.length > 3 ? 'scroll' : '', couponInfo.list.length == 1 ? 'special' : '']"
                    >
                        <div class="border">
                            <div class="couponLeft" :class="couponInfo.list.length > 1 ? 'normal' : ''">
                                <span class="price">
                                    {{item.WaiverAmount}}<em>元</em>
                                </span>
                                <span class="info">无门槛</span>
                            </div>
                            <div 
                                class="couponRight" 
                                v-if="couponInfo.list.length > 1 ? false : true"
                            >立即领取
                                <img 
                                    src="https://insidexkd.oss-cn-shanghai.aliyuncs.com/xkdnewyun/systemfile/coupon/style4.png" 
                                    alt="" 
                                    v-if="'style' + couponInfo.style == 'style4'"
                                >
                            </div>
                        </div>
                        <!-- 特点细节 -->
                        <span class="style1Trait1"></span>
                        <span class="style1Trait2"></span>
                        <span class="style2Trait1" :style="{background: home.background}"></span>
                        <span class="style2Trait2" :style="{background: home.background}"></span>
                        <span class="style2Trait3" :style="{background: home.background}"></span>
                        <span class="style2Trait4" :style="{background: home.background}"></span>
                        <span class="style3Trait1" :style="{background: home.background}"></span>
                        <span class="style3Trait2" :style="{background: home.background}"></span>
                        <span class="specialBox1" :style="{background: home.background}"></span>
                        <span class="specialBox2" :style="{background: home.background}"></span>
                        <div 
                            class="line"
                            v-if="'style' + couponInfo.style == 'style4'"
                            :style="{background: couponInfo.color}"                        
                        >
                            <span></span>
                        </div>
                    </li>
                </ul>
            </v-touch>
        </div>
    </div>
</template>

<script>
// 引入 辅助函数
import { mapState } from 'vuex'
// 引入 滑动方法
import WebUtils from 'Utils/webUtils'

export default {
    props: ['couponInfo'],
    data() {
        return {
            translateX: 0  // ul初始x轴位移
        }
    },
    methods: {
        // 向左滑动
        onSwipeLeft() {            
            if (this.couponInfo.list.length > 3) {
                WebUtils.touchSlideLeft(this, 20, 100, 'coupon')
            }
        },
        // 向右滑动
        onSwiperight() {
            if (this.couponInfo.list.length > 3) {
                WebUtils.touchSlideRight(this, 100)                
            }
        }
    },
    computed: {
        ...mapState(['home'])
    }
}
</script>

<style lang="stylus">
    .couponContainer 
        // 优惠卷
        .coupon
            // overflow-x scroll
            .warp
                display flex
                box-sizing border-box
                // overflow-x: scroll;
                margin-left .2rem
                transform translateX(0px)
                transition all 0.5s
                li
                    overflow hidden
                    position relative
                    flex 1
                    margin .2rem
                    margin-left 0
                    padding 0.22rem
                    height 1.64rem
                    color #fff
                    font-size .4rem
                    .border
                        display flex
                        height 100%
                        overflow hidden
                        .couponLeft
                            flex 0.71
                            display flex
                            flex-direction column
                            justify-content center
                            margin-left 0.3rem
                            margin-right -0.3rem
                            .price
                                font-size 0.46rem
                                font-weight 700
                                em
                                    font-style normal
                                    font-size 0.28rem
                            .info
                                margin-top 0.24rem
                                font-size 0.28rem
                        .normal
                            flex 1
                            align-items center
                            margin 0
                        .couponRight
                            position relative
                            flex 0.29
                            display flex
                            justify-content center
                            align-items center
                            border-left 1px solid #fff
                            font-size 0.28rem
                            margin 0.16rem -0.1rem 0.16rem 0.1rem
                            img 
                                position absolute
                                transform rotate(45deg)
                                top -1.56rem
                                right -1.56rem
        // style1
        .style1
            span[class^="style1Trait"]
                position absolute
                top 0.06rem
                width 0.28rem
                height 100%
                background url('https://insidexkd.oss-cn-shanghai.aliyuncs.com/xkdnewyun/systemfile/coupon/style1.png')
                background-size 100%
            .style1Trait1
                left 0
                transform translateX(-50%)
            .style1Trait2
                right 0
                transform translateX(50%)
            // 特殊样式
            .special
                span[class^="specialBox"]
                    position absolute
                    right 1.91rem
                    width 0.28rem
                    height 0.28rem
                    background #fff
                    border-radius 50%
                .specialBox1
                    top -0.14rem
                .specialBox2
                    bottom -0.14rem
        // style2
        .style2
            li
                position relative
                overflow hidden
                .border
                    position relative
                    border 1px dashed #fff
                    border-radius 8px
                // 特点
                span[class^="style2Trait"]
                    position absolute
                    display block
                    width 1rem
                    height 1rem
                    border-radius 50%
                    background #fff
                .style2Trait1
                    top -0.7rem
                    left -0.7rem
                .style2Trait2
                    top -0.7rem
                    right -0.7rem
                .style2Trait3
                    bottom -0.7rem
                    left -0.7rem
                .style2Trait4
                    bottom -0.7rem
                    right -0.7rem
        // style3
        .style3
            li
                border-radius 0.16rem
                span[class^="style3Trait"]
                    position absolute
                    top 50%
                    width 0.28rem
                    height 0.28rem
                    border-radius 50%
                    background #fff
                .style3Trait1
                    right 0
                    transform translate(50%, -50%)
                .style3Trait2
                    left 0
                    transform translate(-50%, -50%)
        // style4
        .style4
            .border
                border 1px solid #fff
                border-radius 0.2rem
            .line
                position absolute
                width 0.72rem
                height 0.72rem
                top -0.143rem
                right -0.136rem
                transform rotate(45deg)
                border-bottom 1px solid #fff
                span 
                    position absolute
                    width 100%
                    height 1px
                    bottom 44%
                    background #fff
                    padding-bottom 100%
        // 滚动样式
        .scroll
            width 22%
            flex none!important
</style>
